import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  ImageBackground,
  ScrollView
} from 'react-native'
import Carousel from 'react-native-snap-carousel'
import PropTypes from 'prop-types'
import { ScaleS, WIDTH, IS_IOS, ScaleT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import NavigationUtil from 'src/utils/NavigationUtil'

const sliderWidth = ScaleS(176) * 2
const sliderHeight = ScaleS(72)
const itemWidth = ScaleS(176)
const itemHeight = ScaleS(72)
export const FamousSwiperHeight = itemHeight + ScaleS(78)

export default class FamousSwiper extends Component {
  static propTypes = {
    swipers: PropTypes.array
  }

  static defaultProps = {
    swipers: []
  }

  render () {
    const { swipers } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.topTitleContainer}>
          <View style={styles.outDot}>
            <View style={styles.innerDot} />
          </View>
          <Text style={styles.title}>名企直招</Text>
          <CustomButton style={styles.allBtn} onPress={this.allBtnClick}>
            <Text style={styles.allTxt}>全部</Text>
          </CustomButton>
        </View>
        {IS_IOS ? (
          <Carousel
            data={swipers}
            renderItem={this._renderItemSwiper}
            onSnapToItem={this.handleSnapToItem}
            sliderWidth={sliderWidth}
            sliderHeight={sliderHeight}
            itemWidth={itemWidth}
            itemHeight={itemHeight}
            activeSlideAlignment={'start'}
            inactiveSlideScale={1}
            inactiveSlideOpacity={1}
            layout={'default'}
            loop={IS_IOS}
            enableSnap={true}
            useScrollView={IS_IOS}
          />
        ) : (
          <ScrollView
            style={styles.scrollView}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
          >
            {swipers.map(item => this._renderItemSwiper({ item }))}
          </ScrollView>
        )}
      </View>
    )
  }

  _renderItemSwiper = ({ item, index }) => {
    return (
      <CustomButton
        style={styles.sliderBtn}
        params={item}
        onPress={this.itemClick}
      >
        <ImageBackground
          style={styles.sliderBG}
          source={
            item.index % 2
              ? require('@/imgC/company/famous_bg2.png')
              : require('@/imgC/company/famous_bg1.png')
          }
        >
          <CustomImage style={styles.img} source={{ uri: item.logo }} />
          <View style={styles.titConter}>
            <Text numberOfLines={1} style={styles.simpleName}>{item.simpleName}</Text>
            <Text numberOfLines={1} style={styles.slogan}>{item.slogan}</Text>
          </View>
        </ImageBackground>
      </CustomButton>
    )
  }

  allBtnClick = () => {
    NavigationUtil.navigate('FamousList')
  }

  itemClick = item => {
    NavigationUtil.navigate('CompanyHomepage', {
      companyId: item.companyId,
      famousDisplay: true
    })
  }
}
const styles = StyleSheet.create({
  container: {
    alignItems: 'center'
  },

  topTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20),
    height: ScaleS(30),
    marginTop: ScaleS(30),
    marginBottom: ScaleS(18)
  },
  outDot: {
    width: ScaleS(10),
    height: ScaleS(10),
    borderRadius: ScaleS(5),
    backgroundColor: '#FFD810',
    justifyContent: 'center',
    alignItems: 'center'
  },
  innerDot: {
    width: ScaleS(4),
    height: ScaleS(4),
    borderRadius: ScaleS(2),
    backgroundColor: '#FFFFFF'
  },
  title: {
    flex: 1,
    marginLeft: ScaleS(7),
    fontSize: ScaleT(20),
    fontWeight: '500',
    color: '#444444'
  },
  allBtn: {
    width: ScaleS(55),
    height: ScaleS(30),
    backgroundColor: '#FFF9E9',
    borderRadius: ScaleS(15),
    justifyContent: 'center',
    alignItems: 'center'
  },
  allTxt: {
    fontSize: ScaleT(14),
    fontWeight: '500',
    color: '#FFC61C'
  },
  scrollView: {
    width: sliderWidth,
    height: sliderHeight
  },
  sliderBtn: {
    paddingHorizontal: ScaleS(8),
    width: itemWidth,
    height: itemHeight
  },
  sliderBG: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: ScaleS(8)
  },
  img: {
    marginRight: ScaleS(8),
    width: ScaleS(36),
    height: ScaleS(36),
    borderRadius: ScaleS(18),
    resizeMode: 'cover'
  },
  titConter: {
    flex: 1,
    justifyContent: 'center'
  },
  simpleName: {
    fontSize: ScaleT(17),
    fontWeight: '500',
    color: '#FFFFFF',
    lineHeight: ScaleS(27)
  },
  slogan: {
    fontSize: ScaleT(10),
    fontWeight: '500',
    color: '#FFFFFF',
    lineHeight: ScaleS(20)
  }
})
